import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Form, Row, Col, Button, Table, message, Input, Modal } from 'antd'
import Text from '@components/Text'
import style from '../filingCaseManage/CaseManage.module.less'
import nStyle from './InstitutionManage.module.less'
import { formatDate } from '@src/assets/js/tool'
const { Item } = Form
const layout = {
  labelCol: { flex: '100px' }
}

// 获取表格字段配置
function getColumns (setData) {
  return [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'index',
      align: 'center',
      width: 60
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 100
    },
    {
      title: '单位性质',
      dataIndex: 'nature',
      key: 'nature',
      width: 100
    },
    {
      title: '人员数',
      dataIndex: 'staff_num',
      key: 'staff_num',
      width: 100
    },
    {
      title: '仲裁员数',
      dataIndex: 'arbitrator_num',
      key: 'arbitrator_num',
      width: 100
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      width: 100,
      render: (v, l) => {
        return <a onClick={() => setData(l)}>详情</a>
      }
    }
  ]
}

class SecretaryStatistic extends Component {
  state = {
    dictionaries: {},
    causeActions: [],
    list: [],
    loading: false,
    orderField: '',
    order: '',
    currentData: null
  }

  formRef = React.createRef()
  detailRef = React.createRef()

  // 格式化枚举字典
  formatDictionaries (dictionaries = []) {
    const result = {}
    dictionaries.forEach(d => {
      result[d.type] = d.list
    })
    return result
  }

  // 格式化表单数据
  formatParams (form) {
    form = form || this.formRef.current.getFieldsValue()
    const params = { }
    const condition = [{ k: 'pid', o: 'null' }]
    if (form.name) {
      condition.push({ k: 'name', o: 'like', v: `%${form.name}%` })
    }
    params.condition = JSON.stringify(condition)
    return params
  }

  // 获取表格数据
  getTableData (form) {
    this.setState({ loading: true })
    this.$get('/api/mgt/institutionstat', this.formatParams(form))
      .then(res => {
        this.setState({ loading: false })
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        this.setState({
          list: res.data.map((li, i) => {
            li.key = i + 1
            return li
          })
        })
      }).catch(() => this.setState({ loading: false }))
  }

  // 表格请求变化
  tableChange (pagination, filters, sorter) {
    this.setState({
      orderField: sorter.field,
      order: sorter.order
    }, () => {
      this.getTableData()
    })
  }

  initDetail () {
    const c = this.detailRef.current
    const d = this.state.currentData
    if (c && d) {
      c.setFieldsValue(d)
    }
  }

  componentDidMount () {
    this.getTableData()
  }

  render () {
    return (
      <div className={style.container}>
        <div className={style['title-line']}>
          <span>{this.props.title}</span>
        </div>
        <div className={style['search-container']}>
          <div className={style['search-form']}>
            <Form name='my_case_manage' {...layout} ref={this.formRef} onFinish={v => this.getTableData(v)}>
              <Row gutter={24}>
                <Col span={8}>
                  <Item label='名称' name='name'>
                    <Input placeholder='请输入' allowClear />
                  </Item>
                </Col>
                <Col span={8} />
                <Col span={8}>
                  <Item>
                    <div className={style['search-btns']}>
                      <Button type='primary' ghost htmlType='submit'>搜索</Button>
                      <Button htmlType='reset' onClick={() => this.resetHandle()}>重置</Button>
                    </div>
                  </Item>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
        <div className={style['table-container']}>
          <Table loading={this.state.loading} columns={getColumns.call(this, v => this.setState({ currentData: v }, () => this.initDetail()))} dataSource={this.state.list} pagination={false} onChange={(...args) => this.tableChange(...args)} />
        </div>
        <Modal title='仲裁机构详情' width='800px' open={this.state.currentData !== null} onCancel={() => this.setState({ currentData: null })} footer={false} forceRender>
          <Form className={nStyle.detail} ref={this.detailRef} labelCol={{ flex: '200px' }}>
            <Item label='机构名称' name='name'>
              <Text />
            </Item>
            <Item label='机构简称' name='sname'>
              <Text />
            </Item>
            <Item label='机构英文名称' name='enname'>
              <Text />
            </Item>
            <Item label='机构英文简称' name='senname'>
              <Text />
            </Item>
            <Item label='机构代码' name='idno'>
              <Text />
            </Item>
            <Item label='执行机构（办公室）性质' name='nature'>
              <Text />
            </Item>
            <Item label='机构负责人' name='principal'>
              <Text />
            </Item>
            <Item label='地址' name='address'>
              <Text />
            </Item>
            <Item label='联系电话' name='tel'>
              <Text />
            </Item>
            <Item label='简介' name='introduction'>
              <Text />
            </Item>
            <Item label='成立时间' name='founding_datetime'>
              <Text format={v => typeof v === 'number' && v > 0 ? formatDate(v, 'YYYY-MM-DD') : '无'} />
            </Item>
            <Item label='是否备案' name='isrecord'>
              <Text format={v => v === 1 ? '是' : '否'} />
            </Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(SecretaryStatistic)
